<template>
  <el-dialog
    :title="mode === 'add' ? '新增设备评估' : '编辑设备评估'"
    v-model="visible"
    width="80%"
    append-to-body
    @close="resetForm"
  >
  <el-form
  ref="assessmentRef"
  :model="form"
  :rules="rules"
  label-width="250px"
  label-position="right"
  class="assessment-form"
>
      <el-row :gutter="20">
        <!-- 基础信息 -->
        <el-col :span="12">
          <el-form-item label="设备ID" prop="assetId">
            <el-input v-model="form.assetId" placeholder="请输入设备ID" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备件ID" prop="spareId">
            <el-input v-model="form.spareId" placeholder="请输入备件ID" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="初始日期" prop="initialDate">
            <el-date-picker
              v-model="form.initialDate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择初始日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分数" prop="score">
            <el-input v-model="form.score" placeholder="请输入分数" />
          </el-form-item>
        </el-col>

        <!-- 风险评分 -->
        <el-col :span="12" v-for="item in scoreFields" :key="item.prop">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-input v-model="form[item.prop]" :placeholder="`请输入${item.label}`" />
          </el-form-item>
        </el-col>

        <!-- 状态选择 -->
        <el-col :span="12">
          <el-form-item label="是否处理" prop="isDeal">
            <el-select v-model="form.isDeal" placeholder="请选择">
              <el-option label="未处理" :value="0" />
              <el-option label="已处理" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="删除状态" prop="isDelete">
            <el-select v-model="form.isDelete" placeholder="请选择状态">
              <el-option
                v-for="dict in asset_delete"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 备注 -->
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">
          {{ mode === 'add' ? '新增' : '更新' }}
        </el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
// import { addAssessment, updateAssessment } from '@/api/asset/assessment' // 示例API

const props = defineProps({
  visible: Boolean,
  mode: { type: String, default: 'add' }, // add / edit
  rowData: { type: Object, default: () => ({}) },
})

const form = reactive({
  id: null,
  assetId: '',
  spareId: '',
  initialDate: '',
  score: '',
  grade: '',
  standby: '',
  quality: '',
  safetyHealth: '',
  environment: '',
  impact: '',
  criticalLevel: '',
  mtbf: '',
  mttr: '',
  cost: '',
  severity: '',
  severityLevel: '',
  totalFactorScore: '',
  equipmentriskLevel: '',
  isDeal: 0,
  isDelete: 0,
  remark: '',
})

const scoreFields = [
  { label: '等级', prop: 'grade' },
  { label: 'STANDBY 备用评分', prop: 'standby' },
  { label: 'QUALITY 质量评分', prop: 'quality' },
  { label: 'SAFETY/HEALTH 安全健康', prop: 'safetyHealth' },
  { label: 'ENVIRONMENT 环境', prop: 'environment' },
  { label: 'IMPACT 影响', prop: 'impact' },
  { label: 'CRITICAL LEVEL 关键等级', prop: 'criticalLevel' },
  { label: 'MTBF 平均故障间隔', prop: 'mtbf' },
  { label: 'MTTR 平均修复时间', prop: 'mttr' },
  { label: 'COST 成本', prop: 'cost' },
  { label: 'SEVERITY 严重性', prop: 'severity' },
  { label: 'SEVERITY LEVEL 等级', prop: 'severityLevel' },
  { label: 'TOTAL FACTOR SCORE 总评分', prop: 'totalFactorScore' },
  { label: 'EQUIPMENT RISK LEVEL 风险等级', prop: 'equipmentriskLevel' },
]

const asset_delete = ref([
  { label: '正常', value: 0 },
  { label: '删除', value: 1 },
])

const rules = {
  assetId: [{ required: true, message: '请输入设备ID', trigger: 'blur' }],
  spareId: [{ required: true, message: '请输入备件ID', trigger: 'blur' }],
}

const assessmentRef = ref(null)
const visible = ref(props.visible)

watch(
  () => props.visible,
  (val) => {
    visible.value = val
    if (val && props.mode === 'edit') {
      Object.assign(form, props.rowData)
    }
  }
)

function resetForm() {
  Object.keys(form).forEach((key) => (form[key] = ''))
}

function submitForm() {
  assessmentRef.value.validate(async (valid) => {
    if (!valid) return
    try {
      if (props.mode === 'add') {
        // await addAssessment(form)
        ElMessage.success('新增成功')
      } else {
        // await updateAssessment(form)
        ElMessage.success('更新成功')
      }
      visible.value = false
      resetForm()
    } catch (error) {
      ElMessage.error('操作失败')
    }
  })
}
</script>

<style scoped>
.assessment-form {
  padding: 10px 20px;
}

.el-form-item {
  margin-bottom: 10px; /* 控制每行间距 */
}

.el-form-item__label {
  font-weight: 500;
  color: #444;
  line-height: 36px; /* 与输入框垂直对齐 */
}

.el-input,
.el-select,
.el-date-picker {
  width: 100%;
}

.el-form-item__content {
  line-height: 36px;
}

/* 如果 label 偶尔太长，可以加这个控制折行 */
.el-form-item__label {
  white-space: nowrap;
}
</style>
